<template>
	<view class="an-body an-user">
		<view class="an-top-bg" style="background: #fbf9fe">
			<view class="timesall">
				<view class="times list ">
					<view class="an-index-grid2 tCenter p5 pL10 pR10 bodybg col_000">
						<view class="tabshow pR5" @click="choosedate('end')">
							<span class='borderr8 p2 pL5 pR5 borderall'>{{enddate?enddate:'请选择日期'}} <uni-icons class="pL5" type="arrowdown" size="10"></uni-icons></span>
						</view>
					</view>
				</view>
			</view>
			<nodata class='pT30' v-if="grids.length==0"></nodata>
			<!-- 用户信息 -->
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" >
			<!-- <view class="an-userInfo p5" v-for="item in grids" v-if="userinfo['roleid'] != 0">
				<view class="an-user-image m10"><image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="aspectFill" :src="item.vister_personimg | personimg" @error="imageError"></image></view>
				<view class="an-user-text w25">
					<view style="color: black;">
						<h3>{{item.vister_name?item.vister_name:'-'}} </h3>
						<p>访客电话：</p>
						<p>到访公司：</p>
						<p>到访部门：</p>
						<p>到访时间：</p>
						<p>到访位置：</p>
					</view>
					
				</view>
				<view class="cc-view pR10"> 
					<button :class="item.status==0?'cc':'bg_8e8e col_black mR10'">{{checkappstatus(item)}}</button>
					<view class="phone-number">
						{{item.vister_mobile?item.vister_mobile:'-无-'}}
					</view>
					<view class="host-company">
						{{item.app_company_name?item.app_company_name:'-无-'}}
					</view>
					<view class="host-department">
						{{item.app_address?item.app_address:'-无-'}}
					</view>
					<view class="ontime">
						{{retime(item.app_visittime)}}
					</view>
					<view class="location-visited">
						{{item.app_address}}
					</view>
					<view class="details " @click="details(item)">
						查看详情
					</view>
				</view>
				
			</view>
			
			
			
			<view class="an-userInfo p5" v-for="item in grids" v-if="userinfo['roleid'] == 0">
				<view class="an-user-image m10"><image style="width: 100%; height: 100%; background-color: #eeeeee;" mode="aspectFit" :src="item.app_headimgurl?item.app_headimgurl:'../../static/img/user.png'" @error="imageError"></image></view>
				<view class="an-user-text w20">
					<view style="color: black;">
						<h3>{{item.app_user_name?item.app_user_name:'-'}} </h3>
						<p>访客电话：</p>
						<p>到访公司：</p>
						<p>到访部门：</p>
						<p>预约时间：</p>
						<p>到访位置：</p>
						
					</view>
					
				</view>
				<view class="cc-view pL10 pR10"> 
					<button :class="item.status==0?'cc':'bg_8e8e col_black mR10'">{{checkappstatus(item)}}</button>
					<view class="phone-number">
						{{item.vister_mobile?item.vister_mobile:'-无-'}}
					</view>
					<view class="host-company">
						{{item.vister_company_name?item.vister_company_name:'-无-'}}
					</view>
					<view class="host-department">
						{{item.app_dept_name?item.app_dept_name:'-无-'}}
					</view>
					
					<view class="ontime">
						{{retime(item.app_visittime)}}
					</view>
					<view class="location-visited">
						{{item.app_address}}
					</view>
					<view class="details " @click="details(item)">
						查看详情
					</view>
				</view>
				
			</view> -->
			
			
			
			<view class="pB50 bordert1 pT30">
				<view class="an-userInfo p10 borderb1" v-for="(item,index) in grids">
				
					<view class="an-user-image3">
						<view class="myheaadurl"><image mode="aspectFill"  :src="item.vister_personimg | personimg" @error="imageError"></view>
						
					
						</image>
					</view>
					
					<view class="an-user-text1">	
						<view style="color: black;">
							<p>访客姓名：{{item.vister_name?item.vister_name:'-'}}</p>
							<p>访客电话：{{item.vister_mobile?item.vister_mobile:'-'}}</p>						
							<p>到访公司：{{item.app_company_name?item.app_company_name:'-'}}</p>
							<p>到访部门：{{item.app_address?item.app_address:'暂无'}}</p>						
							<p>预约时间：{{retime(item.app_visittime)}}</p>
							<!-- <p>到访状态：{{showm_status(item.m_status)}}</p> -->
							<p>到访状态：{{item.m_tips}}</p>
						</view>
						<view class="cc-view" >
							<button class="cc2" @click="details(item)">查看详情</button>
							<!-- <button class="cc" v-if="checkstatus(index)=='待访问' ||checkstatus(index)=='已到达'|| checkstatus(index)=='已到达'||checkstatus(index)=='访问中'" @click="gomeeting_code(item)" >出示二维码</button> -->
							
							<!-- <i class="cc-icon"><i class="cc-icon-del"></i><text :class="[checkstatusclass(index) ? 'cc-success-status' : 'cc-wrong-status']">{{checkstatus(index)}}</text></i> -->
						</view>
					</view>
					
					
				</view>
			</view>
			</mescroll-uni>
			
		</view>
		<w-picker
			:visible.sync="date1visible"
			mode="date" 
			startYear="2020" 
			endYear="2030"
			value="showyearin"
			:current="true"
			fields="day"
			@confirm="onConfirm($event,'date')"
			@cancel="onCancel"
			:disabled-after="false"
			ref="date" 
		></w-picker>
		<backnext></backnext>
		<!-- 底部导航 -->
		<footernav pagePath='user'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { hostRoot } from '@/common/util.js';
import defaultImg from '@/static/img/userImg.jpg';
import wPicker from '@/components/w-picker/w-picker.vue';
//import {usergetlist} from "@/common/api/user.js"
import {applogslist} from '@/common/api/visiter.js' /*访客记录*/
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import {timestampToTime} from "@/common/common.js"
export default {
	mixins: [MescrollMixin], // 使用mixin
	computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userInfo'])
	},
	components: {
		wPicker
	},
	data() {
		return {
			userSrc: defaultImg,
			grids: [],
			page:1,
			pageSize:10,
			requestchanger:true,
			downOption:{
				auto: false
			},
			upOption:{
				auto:false
			},
			userinfo:{},
			offset:0,
			length:10,
			count:0,
			date_t1:"",
			date_t2:"",
			startdate:"",
			enddate:"",
			datetype:'',
			date1visible:false,
		};
	},
	onLoad() {
		this.userSrc = hostRoot + 'uploads/' + this.userInfo.photoUrl;
		uni.getStorage({
			key: 'userinfo',
			success: res => {
				this.userinfo = res.data
				console.log(res);
			}
		});
		if(this.userinfo['roleid'] == 0){
			uni.setNavigationBarTitle({
			    title: '访问历史'
			});
		}
		var  date = new Date();//时间戳为10位需*1000，时间戳为13位的话不需乘1000	
		var Y = date.getFullYear() + '-';
		var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';			 
		var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate()) + ' ';
		this.enddate=Y+M+D;
		this.ladingdata();
	},
	onShow() {
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		// this.grids = [];
		// if (!this.hasLogin) {
		// 	this.bindLogin();
		// } else if (this.userInfo.grade == 2 || this.userInfo.grade == 3) {
		// 	this.grids = icoList;
		// } else {
		// 	this.grids.push(icoList[0]);
		// 	this.grids.push(icoList[1]);
		// }
	},
	methods: {
		
		onConfirm(res,val) {
			console.log(res)
			console.log(val);
			var datetype=this.datetype;
			//如果页面需要调用多个mode类型，可以根据mode处理结果渲染到哪里;
			switch (datetype) {
				case 'start':
					this.startdate = res.value
					break;
				case 'end':
					this.enddate = res.value
					break;
				
			}
			
			this.page=1;
			this.grids=[];
			this.getlist=[];
			this.ladingdata();
			
		},
		
		choosedate(type){
			this.datetype=type;
			this.date1visible=true;
		},

		/*检验访问状态*/
		checkappstatus(item){
			console.log(item)
			if(item.appointment_status == 1){ return '已访问'}
			switch(item.arrive_status) {
			     case 1:
				 case 2:
				 case 3:
			        return '访问中'
			        break;
			     case 4:
				 case 5:
			        return '已访问'
			        break;
			     default:
			        return '未访问'
			} 
			
		},
		retime(val){
			return timestampToTime(val)
		},
		/*下拉刷新的回调*/
			downCallback(){
				this.page=1;
				if(this.count == this.grids.length){
					this.requestchanger = false
					this.mescroll.endSuccess()
					return
				}
				this.ladingdata();		
			
			},
		/*上拉加载的回调*/
			upCallback(page) {
				console.log(page)
				this.mescroll.endSuccess(this.grids.length, this.requestchanger);
				this.page++;
				this.ladingdata();	
			// 与 mescroll-body 的处理方式一致 > 
			},
		ladingdata(){
			applogslist({
				'offset':this.offset,
				'end_time':this.enddate,
				'length':this.length
			}).then(res=>{
				
				if(res.data.code==400){
					this.requestchanger = false
					return
					}	
				console.log(res)
				if(res.data.data){
					var newResult=res.data.data
					this.offset = res.data.data.length
					this.count = res.data.count
					// this.getlist=res.data.data;
					this.mescroll.endSuccess();
					 if (newResult.length == 0 || newResult.length < 10) {
						 this.allLoaded = true;
					 }
					 if (this.page != 1) {
						 newResult = this.getlist.concat(newResult);
					 }
					 for (let i = 0; i < newResult.length; i++) {
					 	this.grids.push(newResult[i])
					 }
					 this.offset = this.grids.length
					 // this.grids = newResult;
				 }
				
			})
			// var getdata ={
			// 	'Uid':this.userid,
			// 	'uid':this.userid,
			// 	'page':this.page,
			// 	'pagesize':this.pageSize
			
			// }
			// usergetlist(getdata).then(res=>{
			// 	// this.grids = res.data.data
			// 	if(res.data.code==400){
			// 		this.requestchanger = false
			// 		return
			// 		}
			// 	console.log(res)
			// 	if(res.data.data){
			// 		var newResult=res.data.data
			// 		// this.getlist=res.data.data;
			// 		this.mescroll.endSuccess();
			// 		 if (newResult.length == 0 || newResult.length < 10) {
			// 			 this.allLoaded = true;
			// 		 }
			// 		 if (this.page != 1) {
			// 			 newResult = this.getlist.concat(newResult);
			// 		 }
			// 		 this.grids = newResult;
			// 	 }
			// })
		},
		details(item){

			if(this.userinfo.roleid == 6 || this.userinfo.roleid == 5){
				// let detail = {
					//meetingid: item.id,
					// companyid: item.companyid,
					
				// };
				uni.navigateTo({
					url: '../securityguard/useraudit?meetingid='+item.meeting_id
				});
				return 
			}
			// uni.navigateTo({
			// 	url: './recordDetails'
			// });
			if(item.auditing == 0 ){
				var stype = 3
			}else{
				var stype = 2
			}
			let detail = {
				/*邀请id-showtype=审核---appinfo--邀请信息*/
				id: item.appointmentid,
				meetingid:item.id,
				showtype:stype,
				appinfo:item
			};
			uni.navigateTo({
				url: './recordDetails?detaildata=' + encodeURIComponent(JSON.stringify(detail))
			});
		},
		...mapMutations(['logout']),
		clickBtn(id) {
			let url = '';
			switch (id) {
				case 1:
					url = '../yaoqing/yaoqing';
					break;
				case 2:
					url = '../message/messageList/messageList';
					break;
				case 3:
					url = '../sign/sign';
					break;
				case 4:
					url = '../user/userList';
					break;
				default:
					url = '../main/main';
			}
			uni.navigateTo({
				url: url
			});
		},
		editPwd() {
			// 修改密码
			uni.navigateTo({
				url: '../pwd/pwd'
			});
		},
		bindLogin() {
			uni.navigateTo({
				url: '../login/login'
			});
		},
		bindLogout() {
			this.logout();
			uni.reLaunch({
				url: '../login/login'
			});
		},
		imageError(e) {
			this.userSrc = defaultImg;
		}
	}
};
</script>

<style lang="scss">
.an-user {
	.an-quick {
		display: flex;
		flex-direction: row;

		padding: 15px 15px;
		.an-ico-item {
			width: 25%;
			text-align: center;
			.an-ico-img {
				text-align: center;
				width: 40px;
				height: 40px;
				line-height: 40px;
				margin: 0 auto;
				border-radius: 50%;
				color: #ffffff;
				.iconfont {
					font-size: 21px;
				}
				&.color1 {
					//background-color: #e9f4fd;
					background: linear-gradient(#bb51fb, #883ffe);
				}
				&.color2 {
					background: linear-gradient(#f9ac8e, #ec5e5c);
				}
				&.color3 {
					background: linear-gradient(#78f5b1, #34ce78);
				}
				&.color4 {
					background: linear-gradient(#68aefb, #007aff);
				}
			}
		}
	}
	.an-list {
		.an-ico {
			margin-right: 10px;
			.iconfont {
				font-size: 21px;
			}
			&.color1 {
				color: #ec5e5c;
			}
			&.color2 {
				color: #883ffe;
			}
			&.color3 {
				color: #34ce78;
			}
			&.color4 {
				color: #007aff;
			}
		}
	}
}
.uni-list-cell-divider{
	    background-color: white;
}
.an-top-bg{
	height: 100upx;
	padding: 0px 0px 0px 0px;
	margin-left: 10px;
	line-height: 100upx;
	
}
	
uni-button{
	width: 80px;
	height: 30px;
	font-size: 15px;
	line-height: 30px;
	// color: white;
}
.cc{
	// background: #007aff;
	// color: #000;
	margin-right: 0px;
}
.an-userInfo{
	background: white;
	// margin-top: 10px;
	padding-right: 20upx;
}
.an-user-image{
	margin-left: 10px;
	margin-top: 5px;
}
.an-user-text{
	margin-top: 5px;
}
.cc-view{
	text-align: right;
	margin-top: 5px;
	color: #000;
	width: 100%;
}
.details{
	width: 77px;
		height: 30px;
		color: #fff;
		background-color: #007aff;
		border-radius: 18px;
		font-size: 15px;
		line-height: 30px;
		text-align: center;
		margin-left: auto;
		margin-top: 5px;
		margin-bottom: 5px;
}
.cc-view{
	text-align: right;
	margin-top: 5px;
	.cc-icon{
		position: absolute;
		display: inline-block;
		height:100px;
		width: 100px;
		top: 20%;
		right: 0;
		opacity: 0.4;
		text{
				text-align: center;
			    position: relative;
			    display: block;
			    top: -74px;
			    rotate: -30deg;
				font-size: 14px;
				letter-spacing:8px;
				font-weight: bold;
				// opacity: 0.6;
		}
	}
}
.cc2{
	background: #007aff;
	color: white;
	margin-right: 10px;
	float: right;
	width: 100px;
}
.details{
	width: 77px;
		height: 30px;
		color:#fff;
		background: #007aff;
		border-radius: 18px;
		font-size: 15px;
		line-height: 30px;
		text-align: center;
		margin-left: auto;
		margin-top: 5px;
		margin-bottom: 5px;
}

.an-user-text1{
	margin-top: 5px;
	left: 19%;
}
.an-user-text1{
	position: relative;
	width: 80%;
	// margin-bottom: 10px;
}
/*时间筛选*/
.an-index-grid {
		display: flex;
		flex-direction: row; //主轴方向
		flex-wrap: wrap; //换行
		justify-content: space-between; //主轴上的对齐方式
	}
	.an-index-grid2 {
			display: flex;
			flex-direction: row; //主轴方向
			flex-wrap: wrap; //换行
		}
.topnavfeer{position: absolute;z-index: 999;top: 0;}	
.topnavfeer .tablist{border-top: 0.5px solid #c8c7cc;border-bottom: 0.5px solid #c8c7cc;}
.topnavfeer .tabshow .on{border-bottom: 2px solid #ED6C19;}
.timesall{position: absolute;top:0;left: 0;z-index: 999;width: 100%;background: #fbf9fe;}
</style>